<template>
	<view class="store">
		<view class="title">
			<image
      	src="https://yunkeososyunchuc.bc8t.cn/lianaikongjian/static/store/title1.png"
    	/>
			<text>背包</text>
		</view>
		<image
      mode="widthFix"
      class="closeIcon"
      @click="onHandleClose"
      src="https://yunkeososyunchuc.bc8t.cn/lianaikongjian/static/store/close.png"
    />

		<view class="tab">
			<view :class="['li', {'active': index == curIndex}]" v-for="(item, index) in tabList" @click="onTabClick(index)">{{ item.label }}</view>
		</view>
		<!-- <view class="title">
			<image
		src="https://yunkeososyunchuc.bc8t.cn/lianaikongjian/static/store/title.png"
		/>

		</view> -->
		<view class="content">
			<view class="item" style="position: relative;"  v-for="(item,index) in packList" :key="item.img">
				<view @click="backselect(item,index)" :class="num==index?'bg':''" style="position: absolute;z-index: 1;width: 100%;height: 100%;background: rgba(0,0,0,0.2);text-align: center;display: flex;align-items: center;justify-content: center;color: #fff;border-radius: 16px;">
					{{item.name}}
				</view>
				<image
					:src="item.icon_image"
					mode="scaleToFill"
				/>
			</view>
			<view v-if="packList.length>0" style="width: 90%;margin: 10px 0;">
				<u-button @click="queren">确认</u-button>
			</view>
			<view class="bottom">
				<image
					src="https://yunkeososyunchuc.bc8t.cn/lianaikongjian/static/store/button.png"
					mode="scaleToFill"
				/>
				<image
					src="https://yunkeososyunchuc.bc8t.cn/lianaikongjian/static/store/arrow.png"
					mode="scaleToFill"
				/>
				<image
					src="https://yunkeososyunchuc.bc8t.cn/lianaikongjian/static/store/button.png"
					mode="scaleToFill"
				/>
			</view>
		</view>

	</view>
</template>
<script>
export default {
	props:['dialogTitle','packList'],
	data() {
		return {
			curIndex:0,
			tabList:[{label:'食物'},{label:'道具'}],
			num:-1,
			item:{},
		}
	},
	methods: {
		onHandleClose() {
			this.$emit('onCloseClick')
		},
		backselect(e,inx){
			console.log(inx,'rgb(241, 158, 194)rgb(241, 158, 194)')
			this.num=inx
			this.item=e

			// this.$emit('backselect',e)
		},
		queren(){
			if(this.num==-1){
				return uni.showToast({
					title:'请选择',
					icon:"none"
				})
			}
			this.$emit('backselect',this.packList[this.num])
		},
		onTabClick(e){
			this.num=-1
			this.curIndex=e
			this.$emit('tabselect',e)
		},
	}
}
</script>

<style scoped>
	.bg{
		background: rgb(241, 158, 194,0.5) !important;
	}
	.tab {
		display: flex;
		justify-content: center;
	}
	.tab .li {
		color: #ecb12d;
		font-weight: 500;
		font-size: 40rpx;
		padding: 10rpx 20rpx;
		border: 4rpx solid #af5c0b;
	}
	.tab .li:nth-child(1) {
		border-top-left-radius: 20rpx;
		border-bottom-left-radius: 20rpx;
		border-right: none;
	}
	.tab .li:nth-child(2) {
		border-top-right-radius: 20rpx;
		border-bottom-right-radius: 20rpx;
	}
	.tab .li.active {
		background: #af5c0b;
		color: #fff;
	}
.store {
	position: relative;
	border-top-left-radius: 200rpx;
	border-top-right-radius: 200rpx;
	background: url('https://yunkeososyunchuc.bc8t.cn/lianaikongjian/static/store/bg.png');
}
.store .title {
	width: 100%;
	height: 200rpx;
	background: url('https://yunkeososyunchuc.bc8t.cn/lianaikongjian/static/store/title-bg.png');
	background-size: 100% 100%;
	border-top-left-radius: 20rpx;
	font-size: 50rpx;
	color: #af5c0b;
	font-weight: 800;
	letter-spacing: 8rpx;
	margin-bottom: 0 !important;
	position: relative;
}
.store .title image {
	width: 50%;
	height: 150rpx;
	margin-top: -60rpx;
}
.store .title text {
	position: absolute;
	left: 50px;
	transform: translateX(-50%);
	top: -10%;
	color: #fbe4b0;
}
.store .closeIcon {
	width: 60rpx;
	height: 60rpx;
	position: absolute;
	top: 0rpx;
	right: 0rpx;
}
.content {
	display: flex;
	justify-content: space-around;
	flex-wrap: wrap;
	border: 20rpx solid #ecb12d;
	border-top: none;
	border-bottom-left-radius: 20rpx;
	border-bottom-right-radius: 20rpx;
}
.content .item {
	width: 30%;
	height: 200rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background: url('https://yunkeososyunchuc.bc8t.cn/lianaikongjian/static/store/store-bg.png');
	background-size: 100% 100%;
	margin: 40rpx 0 0 0;
}
.item image {
	width: 100rpx;
	height: 100rpx;
}
.item .money {
	width: 70%;
	height: 60rpx;
	background: url('https://yunkeososyunchuc.bc8t.cn/lianaikongjian/static/store/money-bg.png');
	background-size: 100% 100%;
	display: flex;
	align-items: center;
	margin-left: 20rpx;
}
image.price {
	width: 60rpx;
	height: 60rpx;
	margin: -10rpx 0 0 -20rpx
}
.item text {
	color: #fbe4b0;
	font-weight: 600;
	margin: -10rpx 0 0 20rpx
}
.bottom {
	width: 100%;
	display: flex;
	justify-content: space-between;
	margin: 20rpx;
}
.bottom image {
	width: 60rpx;
	height: 60rpx;
}
</style>
